<script setup lang="ts">
import { DataField } from '@formily/core';
import { useField } from '@formily/vue';
import { GlobalRegistry } from '@season-designable/core';
import { usePrefix } from '@season-designable/vue';
import FoldItem from '../FoldItem/index.vue';
import InputItem from '../InputItems/InputItem.vue';
import InputItems from '../InputItems/InputItems.vue';
import SizeInput from '../SizeInput/SizeInput.vue';

const PositionMap = {
  top: 0,
  right: 1,
  bottom: 2,
  left: 3,
  all: 0,
};

const props = defineProps(['value']);
const emit = defineEmits(['change']);

const field = useField<DataField>();
const prefix = usePrefix('box-style-setter');

// const BoxRex =
//   /([\d\.]+[^\d\s\.+-]+)(?:\s+([\d\.]+[^\d\s\.+-]+)(?:\s+([\d\.]+[^\d\s\.+-]+)(?:\s+([\d\.]+[^\d\s\.+-]+))?)?)?/;

const createBoxStyleConnector = (position: keyof typeof PositionMap) => {
  // const matched = String(props.value).match(BoxRex) || [];
  const matched = String(props.value || '')
    .trim()
    .split(' ');

  const value = matched[PositionMap[position]];
  const v1 = matched[0];
  const v2 = matched[1];
  const v3 = matched[2];
  const v4 = matched[3];
  const allEqualls = v1 === v2 && v2 === v3 && v3 === v4;

  return {
    value: position === 'all' ? (allEqualls ? v1 : undefined) : value,
    onChange: (value: string) => {
      if (position === 'all') {
        emit(
          'change',
          `${value || '0px'} ${value || '0px'} ${value || '0px'} ${
            value || '0px'
          }`
        );
      } else {
        matched[PositionMap[position]] = value;
        emit(
          'change',
          `${matched[0] || '0px'} ${matched[1] || '0px'} ${
            matched[2] || '0px'
          } ${matched[3] || '0px'}`
        );
      }
    },
  };
};
</script>

<template>
  <FoldItem :class="prefix" :label="field.title">
    <template #base>
      <SizeInput
        :="createBoxStyleConnector('all')"
        :exclude="['inherit', 'auto']"
      ></SizeInput>
    </template>

    <template #extra>
      <InputItems>
        <InputItem
          icon="mdi:border-top"
          :tooltip="GlobalRegistry.getDesignerMessage('icons.Top')"
        >
          <SizeInput
            :="createBoxStyleConnector('top')"
            :exclude="['inherit', 'auto']"
          ></SizeInput>
        </InputItem>

        <InputItem
          icon="mdi:border-right"
          :tooltip="GlobalRegistry.getDesignerMessage('icons.Right')"
        >
          <SizeInput
            :="createBoxStyleConnector('right')"
            :exclude="['inherit', 'auto']"
          ></SizeInput>
        </InputItem>

        <InputItem
          icon="mdi:border-bottom"
          :tooltip="GlobalRegistry.getDesignerMessage('icons.Bottom')"
        >
          <SizeInput
            :="createBoxStyleConnector('bottom')"
            :exclude="['inherit', 'auto']"
          ></SizeInput>
        </InputItem>

        <InputItem
          icon="mdi:border-left"
          :tooltip="GlobalRegistry.getDesignerMessage('icons.Left')"
        >
          <SizeInput
            :="createBoxStyleConnector('left')"
            :exclude="['inherit', 'auto']"
          ></SizeInput>
        </InputItem>
      </InputItems>
    </template>
  </FoldItem>
</template>

<style lang="scss" scoped>
@import '../../../../styles.scss';
</style>
